#post {
  article {
    position: relative;
    overflow: unset;
    @include card;

    .post-header {
      position: relative;
      overflow: hidden;
      border-radius: 3px 3px 0 0;

      .wrapper {
        transition: transform 0.5s ease-out;
      }

      &:hover {
        .wrapper {
          transform: scale(1.04);
        }
      }

      .post-head {
        position: absolute;
        bottom: 0;
        width: 100%;
        color: $brown;
        background-color: $bg-white-deep;
        backdrop-filter: blur(5px) saturate(150%) brightness(1.1);
        box-shadow: 0 -3px 5px $bg-dark;

        @include pc-layout {
          padding: $card-padding;
          height: 80px;
        }
        @include sp-layout {
          padding: $card-padding-small;
          height: 60px;
        }

        .post-title {
          display: flex;
          justify-content: space-between;
          align-items: center;

          @include pc-layout {
            height: 34px;
          }
          @include sp-layout {
            height: 24px;
          }

          h1 {
            font-weight: $font-weight-normal;
            @include sp-layout {
              font-size: $font-size-larger;
            }
          }
        }

        .post-meta {
          display: flex;
          @include pc-layout {
            margin-top: 8px;
          }
          @include sp-layout {
            margin-top: 4px;
          }

          & > span {
            display: flex;
            align-items: center;
            margin-right: 12px;

            &:last-child {
              margin-right: 0;
            }

            span {
              padding-right: 6px;
              &:last-child {
                padding-right: 0;
              }
            }

            .icon {
              margin-right: 4px;
            }
            .icon-fire {
              margin-top: -2px;
            }
            .icon::before {
              display: unset;
            }
          }
        }
      }
    }

    .post-body {
      padding: 25px 0;
    }
  }
}
